<template>
	<div class="w1080">
		<main>
			<el-form ref="loginForm" :rules="rules" :model="formLogin" class="xd_form fn_vetically fn_horizontally">
				<div class="xd_pic"><img src="./img/img_1.png" /></div>
				<ul class="xd_ulis">
					<li class="fn_vetically fn_horizontally xd_title">八桂小铺后台管理系统</li>
					<li class="fn_vetically">
						<img class="xd_icon1" src="./img/ren-copy-copy.png" />
						<el-form-item prop="userName" style="margin-top:20px;margin-buttom:10px;width:240px;">
							<el-input v-on:keyup.enter.native="submit" type="text" v-model="formLogin.userName"
								placeholder="请输入用户名">
								<!-- <i slot="prepend" class="fa fa-user-circle-o"></i> -->
							</el-input>
						</el-form-item>
					</li>
					<li class="fn_vetically">
						<img class="xd_icon1" src="./img/mima.png" />
						<el-form-item prop="password" style="margin-top:20px;margin-buttom:10px;width:240px;">
							<el-input v-on:keyup.enter.native="submit" type="password" v-model="formLogin.password"
								placeholder="密码">
								<!-- <i slot="prepend" class="fa fa-keyboard-o"></i> -->
							</el-input>
						</el-form-item>
					</li>
					<!-- <li class="fn_vetically"><div class="xd_out"><div class="xd_in"></div></div>记住密码</li> -->
					<li class="xd_btns fn_vetically fn_horizontally"> <el-button size="default" @click="submit"
							type="primary" class="button-login">登录</el-button></li>
					<img class="xd_z1" src="./img/z1.png" />
					<img class="xd_z2" src="./img/z2.png" />
					<img class="xd_z3" src="./img/z3.png" />
					<img class="xd_z4" src="./img/z4.png" />
				</ul>
			</el-form>
			<aside class="xd_copy fn_center">
				<div class="page-login--content-footer">
					<!-- <p class="page-login--content-footer-options">
						<a href="#">帮助</a> &nbsp;
						<a href="#">隐私</a> &nbsp;
						<a href="#">条款</a> &nbsp;
					</p> -->
					<p class="page-login--content-footer-copyright">
						Copyright <d2-icon name="copyright" /> {{year}} 八桂小铺出品 <br>
						<!-- <a href="https://beian.miit.gov.cn/">桂ICP备2020007293号</a> -->
					</p>
				</div>
			</aside>
		</main>
		<footer></footer>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				year: 2024,

				// 表单
				formLogin: {
					userName: '',
					password: '',
					code: ''
				},
				// 校验
				rules: {
					userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
				}
			}
		},
		methods: {
			...mapActions('d2admin/account', ['login']),
			
			refreshTime() {
				this.time = dayjs().format('HH:mm:ss');
			},
			handleUserBtnClick(user) {
				this.formLogin.userName = user.userName;
				this.formLogin.password = user.password;
				this.submit();
			},
			// 提交登录信息
			submit() {
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						// 登录
						// 注意 这里的演示没有传验证码
						// 具体需要传递的数据请自行修改代码
						let password = md5(this.formLogin.password);
						this.login({
							userName: this.formLogin.userName,
							password: password
						})
							.then(() => {
								// 重定向对象不存在则返回顶层路径
								this.$router.replace(this.$route.query.redirect || '/');
							})
					} else {
						// 登录表单校验失败
						this.$message.error('表单校验失败');
					}
				})
			}
		},
		mounted() {
			let now = new Date();
			let year = now.getFullYear();
			if(year > 2024) {
				this.year = 2024 + '~' + year;
			}
		},
	}
</script>

<style lang="scss" scoped>
	/*引入样式*/
	@import './css/backgroundLogin.css';
	@import './css/config.css';
	
	.xd_copy {
		height: 70px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	
	// 手机端适配样式
	@media screen and (min-width: 280px) and (max-width: 960px) {
		.xd_form {
			padding: 30px 0px;
		}
		.xd_pic {
			display: none;
		}
		.xd_ulis {
			width: 90%;
		}
	}
</style>